/* 字号 */
$fontSizeMap: (
  0: 0px,
  10: 10px,
  12: 12px,
  14: 14px,
  16: 16px,
  18: 18px,
  20: 20px,
  22: 22px,
  24: 24px,
  26: 26px,
  28: 28px,
  30: 30px,
  32: 32px,
  34: 34px,
  36: 36px,
  40: 40px
);
@each $key, $val in $fontSizeMap {
  .ft-#{$key} {
    font-size: #{$val};
  }
}

/* 位移 */
$marginSizeMap: (
  2: 2px,
  4: 4px,
  6: 6px,
  8: 8px,
  10: 10px,
  12: 12px,
  14: 14px,
  16: 16px,
  18: 18px,
  20: 20px,
  24: 24px,
  28: 28px,
  30: 30px,
  40: 40px,
  60: 60px,
  80: 80px
);
@each $key, $val in $marginSizeMap {
  .mt-#{$key} {
    margin-top: #{$val};
  }
  .mr-#{$key} {
    margin-right: #{$val};
  }
  .mb-#{$key} {
    margin-bottom: #{$val};
  }
  .ml-#{$key} {
    margin-left: #{$val};
  }
}
.mt-auto {
  margin: 0 auto;
}

/* 颜色 */
$fontColor: (
  000: #000000,
  111: #111111,
  222: #222222,
  333: #333333,
  444: #444444,
  555: #555555,
  666: #666666,
  777: #777777,
  888: #888888,
  999: #999999,
  aaa: #aaaaaa,
  bbb: #bbbbbb,
  ccc: #cccccc,
  ddd: #dddddd,
  eee: #eeeeee,
  fff: #ffffff
);
@each $key, $val in $fontColor {
  .fc-#{$key} {
    color: #{$val};
  }
}

/* 行高 */
$lineHeight: (
  18: 18px,
  20: 20px,
  22: 22px,
  24: 24px,
  28: 28px,
  36: 36px,
  40: 40px,
  42: 42px,
  44: 44px,
  46: 46px,
  50: 50px,
  62: 62px
);
@each $key, $val in $lineHeight {
  .lh-#{$key} {
    line-height: #{$val};
  }
}

/* flex */
.flex1 {
  flex: 1;
}
.flex-h {
  display: flex;
  justify-content: flex-start;
}
.flex-hs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.flex-hc {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex-he {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.flex-hspa {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
}
.flex-hsspa {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  flex-wrap: wrap;
}
.flex-hspbs {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.flex-hspb {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-hsspb {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.flex-vs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.flex-vsspb {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}

.flex-vc {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.flex-ve {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
}
.flex-vcspb {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
.flex-vcspa {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-direction: column;
}

// 超出显示省略号
.space {
  white-space: nowrap;
  overflow: hidden;
  word-break: break-all;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
}
.space2 {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.space3 {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

// 文本段落两端对齐
.textalign {
  text-align: justify;
  text-justify: inter-ideograph; /*IE*/
  word-break: break-all;
}

// 文本竖排显示
.writing {
  writing-mode: vertical-lr;
}

/* 标准颜色 */
// 字体颜色
.baseColor {
  color: #3786fd;
}
// 背景颜色
.baseBackground {
  background-color: #3786fd;
}
// 边框颜色
.baseBorder {
  border: 2px solid #3786fd;
}
